<template>
  <view class="list-container">
    <view class="list-item" :class="{ active: index === 0 }" v-for="(item, index) in dataList" :key="index">
      <view class="left">
        <view class="date">{{ item.time.split(' ')[0]}}</view>
        <view class="time">{{ item.time.split(' ')[1]}}</view>
      </view>

      <view class="dot-wrap">
        <view class="dot"></view>
      </view>

      <view class="right">
        <view class="content-wrap">
          <view class="content">{{ item.context }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'StepInfo',
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {}
  },
}
</script>

<style lang="scss" scoped>
.list-container {
  color: #aaa;
  padding-top: 34rpx;
}
.list-item {
  display: flex;
  min-height: 100rpx;

  &.active {
    color: #ff3c11;
    .dot {
      width: 20rpx;
      height: 20rpx;
      background: #ff3c11;
      border-radius: 50%;
    }
  }
}
.left {
  font-size: 22rpx;
  margin-top: -34rpx;
  .time {
    margin-top: 10rpx;
  }
}
.dot-wrap {
  width: 20rpx;
  height: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 14rpx;
  margin-right: -10rpx;
}
.dot {
  width: 12rpx;
  height: 12rpx;
  background: #dcdcdc;
  border-radius: 50%;
  position: relative;
}
.right {
  flex: 1;
  font-size: 27rpx;
  border-left: 2rpx solid #dcdcdc;
  padding-left: 24rpx;
  padding-bottom: 30rpx;
  margin-bottom: -4rpx;
  .content-wrap {
    margin-top: -10rpx;
  }
}
.list-item:last-child .right {
  border: none;
}
</style>
